package com.example.project3

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Project3Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ImageGalleryScreen()
                }
            }
        }
    }
}

@Composable
fun Project3Theme(content: @Composable () -> Unit) {
    MaterialTheme(
        content = content
    )
}

@Composable
fun ImageGalleryScreen() {
    // 图片列表 - 字母命名
    val imageList = listOf(
        R.drawable.a,
        R.drawable.b,
        R.drawable.c,
        R.drawable.d
    )

    // 图片标题
    val imageTitles = listOf("风景 A", "风景 B", "风景 C", "风景 D")

    var currentIndex by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 标题
        Text(
            text = "图片陈列馆",
            style = MaterialTheme.typography.headlineMedium,
            modifier = Modifier.padding(16.dp)
        )

        // 主图片区域
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .padding(16.dp),
            elevation = CardDefaults.cardElevation(8.dp)
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                // 主图片
                Image(
                    painter = painterResource(imageList[currentIndex]),
                    contentDescription = imageTitles[currentIndex],
                    modifier = Modifier
                        .fillMaxWidth()
                        .weight(1f)
                        .padding(16.dp)
                        .clip(RoundedCornerShape(8.dp)),
                    contentScale = ContentScale.Fit
                )

                // 图片标题和指示器
                Text(
                    text = "${imageTitles[currentIndex]} (${currentIndex + 1}/${imageList.size})",
                    style = MaterialTheme.typography.titleMedium,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
            }
        }

        // 缩略图列表
        Text(
            text = "预览图",
            style = MaterialTheme.typography.titleSmall,
            modifier = Modifier.padding(top = 8.dp)
        )

        LazyRow(
            modifier = Modifier
                .height(80.dp)
                .padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            itemsIndexed(imageList) { index, imageRes ->
                ThumbnailItem(
                    imageRes = imageRes,
                    isSelected = index == currentIndex,
                    onClick = { currentIndex = index }
                )
            }
        }

        // 控制按钮
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Button(
                onClick = {
                    currentIndex = if (currentIndex > 0) currentIndex - 1 else imageList.size - 1
                },
                modifier = Modifier.weight(1f)
            ) {
                Text("上一张")
            }

            Spacer(modifier = Modifier.width(16.dp))

            Button(
                onClick = {
                    currentIndex = if (currentIndex < imageList.size - 1) currentIndex + 1 else 0
                },
                modifier = Modifier.weight(1f)
            ) {
                Text("下一张")
            }
        }
    }
}

@Composable
fun ThumbnailItem(
    imageRes: Int,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    Card(
        modifier = Modifier
            .size(70.dp)
            .clip(RoundedCornerShape(8.dp)),
        elevation = if (isSelected) CardDefaults.cardElevation(8.dp) else CardDefaults.cardElevation(2.dp),
        colors = CardDefaults.cardColors(
            containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer
            else MaterialTheme.colorScheme.surface
        )
    ) {
        Image(
            painter = painterResource(imageRes),
            contentDescription = null,
            modifier = Modifier
                .fillMaxSize()
                .clickable { onClick() },
            contentScale = ContentScale.Crop
        )
    }
}